<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				bor der: 1px solid red;
				flo at: left;
				font-size: 16px;/* 页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，内容行内元素*/
				/* 结论：文本不能浮动，特点：块包行 */
			}
			img{
				border: 10px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/img_3.png" alt="哪吒" width="250px" height="250px"/>
		
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, eos ullam ipsam reiciendis doloribus dolorum, deleniti culpa nihil recusandae unde, modi non! Voluptatem modi ducimus vel ullam reiciendis explicabo labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur fugiat dignissimos quibusdam. Ad cum aliquam dolor placeat sint sapiente inventore consectetur, quisquam itaque reprehenderit aut deleniti modi atque vel recusandae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quae odio eligendi corporis, dolores quis quam, soluta quas facere sunt voluptates consectetur ab sequi quaerat. Odit ut veniam ullam provident!</p>
		
	</body>
</html>